<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script>
        $(function(){
            var data=[
                {
                    "icon":"icon-edit",
                    "menuid":1,
                    "menuname":"用户管理",
                    "menus":[
                        {
                            "icon":"icon-add",
                            "menuid":11,
                            "menuname":"系统用户",
                            "url":"/shop/showuser"
                        },
                        {
                            "icon":"icon-add",
                            "menuid":12,
                            "menuname":"前台客户",
                            "url":"/shop/showcustomer"
                        },
                    ]
                },
                {
                    "icon":"icon-edit",
                    "menuid":2,
                    "menuname":"销售管理",
                    "menus":[
                        {
                            "icon":"icon-add",
                            "menuid":21,
                            "menuname":"商品管理",
                            "url":"/shop/showproduct"
                        },
                        {
                            "icon":"icon-add",
                            "menuid":22,
                            "menuname":"订单管理",
                            "url":"/shop/showorder"
                        },
                    ]
                },
            ];

            // 循环数据并添加到面板
            $.each(data,function(i,sm){
                var memulist='';
                $.each(sm.menus,function(j,obj){
                    memulist+=`
                        <div style="padding:10px">
                            <a class="easyui-linkbutton" data-options="iconCls:'${obj.icon}',plain:true">${obj.menuname}</a>
                        </div>
                    `;
                });

                $('#nav').accordion('add',{
                    title:sm.menuname,
                    content:memulist,
                    selected:false,
                    iconCls:sm.icon
                })
            });
        
        });
    </script>
</head>
<body>
    <!-- <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
        <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery.
            It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>
    </div> -->

    <div id="nav" class="easyui-accordion" style="width: 200px;">

    </div>
</body>
</html>